<template>
  <view class="product-card" @tap="handleClick">
    <view class="image-container">
      <image class="product-image" :src="product.image" mode="aspectFill" :lazy-load="true"></image>
      <view class="product-tag" v-if="product.tag">{{ product.tag }}</view>
      <view class="favorite-btn" v-if="showFavorite" @tap.stop="toggleFavorite">
        <uni-icons :type="isFavorite ? 'heart-filled' : 'heart'" 
                  size="20" 
                  :color="isFavorite ? '#ff4757' : '#fff'"></uni-icons>
      </view>
    </view>
    
    <view class="product-info">
      <text class="product-title">{{ product.title }}</text>
      <text class="product-subtitle" v-if="product.subtitle">{{ product.subtitle }}</text>
      
      <view class="price-section">
        <view class="current-price">
          <text class="price-symbol">¥</text>
          <text class="price-value">{{ product.price }}</text>
        </view>
        <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
      </view>
      
      <view class="product-meta">
        <text class="sales-count" v-if="product.sales">已售{{ product.sales }}</text>
        <view class="rating" v-if="product.rating">
          <uni-icons type="star-filled" size="12" color="#FFD700"></uni-icons>
          <text class="rating-text">{{ product.rating }}</text>
        </view>
        <text class="shop-name" v-if="product.shopName">{{ product.shopName }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductCard',
  props: {
    product: {
      type: Object,
      required: true,
      default: () => ({})
    },
    showFavorite: {
      type: Boolean,
      default: false
    },
    cardType: {
      type: String,
      default: 'grid', // grid 或 list
      validator: (value) => ['grid', 'list'].includes(value)
    }
  },
  
  data() {
    return {
      isFavorite: false
    }
  },
  
  mounted() {
    // 从本地存储或接口获取收藏状态
    this.loadFavoriteStatus()
  },
  
  methods: {
    handleClick() {
      this.$emit('click', this.product)
    },
    
    toggleFavorite() {
      this.isFavorite = !this.isFavorite
      this.$emit('favorite', {
        product: this.product,
        isFavorite: this.isFavorite
      })
      
      // 保存收藏状态到本地
      this.saveFavoriteStatus()
      
      uni.showToast({
        title: this.isFavorite ? '已收藏' : '已取消收藏',
        icon: 'none',
        duration: 1500
      })
    },
    
    loadFavoriteStatus() {
      // 从本地存储获取收藏状态
      const favorites = uni.getStorageSync('favorites') || []
      this.isFavorite = favorites.includes(this.product.id)
    },
    
    saveFavoriteStatus() {
      let favorites = uni.getStorageSync('favorites') || []
      
      if (this.isFavorite) {
        if (!favorites.includes(this.product.id)) {
          favorites.push(this.product.id)
        }
      } else {
        favorites = favorites.filter(id => id !== this.product.id)
      }
      
      uni.setStorageSync('favorites', favorites)
    }
  }
}
</script>

<style scoped>
.product-card {
  background-color: #fff;
  border-radius: 8rpx;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20rpx;
}

.image-container {
  position: relative;
  width: 100%;
}

.product-image {
  width: 100%;
  height: 345rpx;
}

.product-tag {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background-color: #ff4757;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 4rpx;
  z-index: 2;
}

.favorite-btn {
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  width: 60rpx;
  height: 60rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.product-info {
  padding: 20rpx;
}

.product-title {
  font-size: 26rpx;
  color: #333;
  line-height: 36rpx;
  height: 72rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 8rpx;
}

.product-subtitle {
  font-size: 22rpx;
  color: #666;
  line-height: 30rpx;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price-section {
  display: flex;
  align-items: baseline;
  margin-bottom: 10rpx;
}

.current-price {
  display: flex;
  align-items: baseline;
  margin-right: 10rpx;
}

.price-symbol {
  font-size: 20rpx;
  color: #ff4757;
  font-weight: bold;
}

.price-value {
  font-size: 28rpx;
  color: #ff4757;
  font-weight: bold;
}

.original-price {
  font-size: 22rpx;
  color: #999;
  text-decoration: line-through;
}

.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sales-count {
  font-size: 22rpx;
  color: #999;
}

.rating {
  display: flex;
  align-items: center;
  margin: 0 10rpx;
}

.rating-text {
  font-size: 22rpx;
  color: #999;
  margin-left: 4rpx;
}

.shop-name {
  font-size: 22rpx;
  color: #999;
  flex-shrink: 0;
}

/* 列表模式样式 */
.product-card.list-mode {
  display: flex;
  padding: 20rpx;
  margin-bottom: 0;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  box-shadow: none;
}

.list-mode .image-container {
  width: 200rpx;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.list-mode .product-image {
  height: 200rpx;
  border-radius: 8rpx;
}

.list-mode .product-info {
  flex: 1;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.list-mode .product-title {
  font-size: 28rpx;
  height: auto;
  margin-bottom: 10rpx;
}

.list-mode .product-meta {
  margin-top: auto;
}
</style>